<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">离职委派</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <div class="query">
      <p class="header">查询客户</p>
      <div class="polling">
        <el-form
          :inline="true"
          ref="form"
          :model="queryForm"
          label-width=""
          size="mini"
        >
          <el-form-item label="信息">
            <el-input
              placeholder="请输入客户手机号码"
              v-model="queryForm.info"
            ></el-input>
          </el-form-item>
          <div class="selectDate">
            <span>时间</span>
            <div class="picker">
              <el-date-picker
                v-model="date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </div>
          <el-form-item label="入线方式">
            <el-select
              v-model="queryForm.Incoming"
              filterable
              placeholder="选择入线方式"
              clearable
            >
              <el-option
                v-for="items in line"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客服">
            <el-select
              v-model="queryForm.service"
              filterable
              placeholder="请选择客服"
            >
              <el-option
                v-for="items in customer"
                :key="items.id"
                :label="items.reallyName"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户等级">
            <el-select
              v-model="queryForm.category"
              filterable
              placeholder="请选择客户等级"
              clearable
            >
              <el-option
                v-for="items in rank"
                :key="items.dictId"
                :label="items.dictName"
                :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 					<el-form-item label="地区">
						<levelAddr class='addressContent' :province='queryForm.province' :city="queryForm.city" :area="queryForm.area"
						 @updateprovice="getProvince" @updatecity='getCity' @updatearea="getArea"></levelAddr>
					</el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="searchEvent()">搜索</el-button>
            <el-button type="danger" @click="reset">重置</el-button>
            <!-- <el-button type="primary">导出数据</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <el-button
        type="primary"
        size="mini"
        style="margin-bottom: 10px"
        v-if="parArray.indexOf('wpkh') != -1"
        @click="allocation"
        >批量分配</el-button
      >
      <el-table
        ref="table"
        tooltip-effect="dark"
        :data="tableData.list"
        @selection-change="SelectionCurson"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号码">
          <template slot-scope="scope">
            <p v-if="is_null(scope.row.phoneTwo)">{{ scope.row.phone }}</p>
            <div v-else>
              <div>{{ scope.row.phone }}</div>
              <div>{{ scope.row.phoneTwo }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="userLevel" label="客户等级">
          <template slot-scope="scope">
            <p v-if="is_null(scope.row.userLevel)">--</p>
            <p v-else>{{ scope.row.userLevel }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="userIntention" label="客户意向">
          <template slot-scope="scope">
            <span v-if="is_null(scope.row.userIntention)">--</span>
            <span v-else>{{ scope.row.userIntention }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="userIntention" label="类型">	</el-table-column> -->
        <el-table-column prop="customerName" label="客服人员"></el-table-column>
        <el-table-column
          prop="createdTime"
          label="进度时间"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="历史订单记录"
              placement="top-start"
            >
              <p class="operation" @click="tolist(scope.row)">历史</p>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum >= 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total,sizes,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :total="tableData.totalNum"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
    <!-- 分配用户列表 -->
    <el-dialog :visible.sync="Visible" :append-to-body="true" title="分配资源">
      <div class="tree">
        <el-input
          style="margin: 0 0px 20px"
          placeholder="输入关键字进行搜索"
          v-model="filterText"
        ></el-input>
        <el-tree
          class="el-menu-vertical-demo"
          ref="tree"
          :data="tree"
          :props="defaultProps"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :default-expand-all="true"
          :filter-node-method="filterNode"
        ></el-tree>
      </div>
      <div style="position: relative">
        <div class="table1">
          <el-table
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            :data="tablePerson.list"
            style="width: 100%"
            :row-key="getRowKey"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="50"
              align="center"
              v-model="multipleSelection"
            ></el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="100"
            ></el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="props">
                <p>{{ props.row.reallyName }}</p>
              </template>
            </el-table-column>
            <el-table-column
              label="联系电话"
              prop="phoneNumber"
            ></el-table-column>
            <el-table-column label="所在部门">
              <template slot-scope="props">
                <span>{{ props.row.orgName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="职位" prop="positionName"></el-table-column>
            <el-table-column
              label="员工状态"
              prop="statusName"
            ></el-table-column>
            <!-- <el-table-column label="创建时间" prop="createdTime"></el-table-column> -->
          </el-table>
        </div>
        <!-- 分页start -->
        <div class="page2" v-if="tablePerson.totalNum > 0">
          <div class="block">
            <el-pagination
              @size-change="handleSizeEmplay"
              @current-change="handleCurrentEmplay"
              :current-page.sync="stafpage"
              :page-size="pageSize"
              :page-sizes="[10, 20, 30, 50]"
              layout="total,sizes,prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="tablePerson.totalNum"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 分页end -->
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          @click="
            Visible = false;
            toggleSelection();
          "
          >取 消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="
            Visible = false;
            submission();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import levelAddr from '@/components/levelAddr'
export default {
  components: {
    levelAddr
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
  data () {
    return {
      queryForm: {
        info: "",
        Incoming: "",
        service: "",
        category: "",
        province: "",
        city: "",
        area: "",
        type: [],
        clientType: "1",
      },
      date: "",
      filterText: "",
      data: [],
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      stafpage: 1,
      stafPageSize: 10,
      line: [],
      rank: [],
      customer: [],
      limits: "",
      parArray: [],
      client: [],
      multipleSelection: [],
      selectionCustomer: [],
      tablePerson: [],
      Visible: false,
    }
  },
  created () {
    this.listAxios(1);
    this.commentAxios();
    this.customerlist();
    // 权限设定判断 normsCode
    this.limits = JSON.parse(sessionStorage.getItem('limit'));
    const params = this.limits.buttonTreeDto.filter(item => item.menuCode === "quitDelegateCode");
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    // 权限设定判断 normsCode 
  },
  activated () {
    // this.listAxios(1);
    // this.commentAxios();
    // this.customerlist();
  },
  methods: {
    listAxios (pageNo) {
      let beginTime = "";
      let endTime = "";
      if (!this.is_null(this.date)) {
        beginTime = this.date[0] + " 00:00:00";
        endTime = this.date[1] + " 23:59:59";
      }
      this.axios.post('/order/comm/customeruser/appoint/list', {
        "request": {
          "address": this.queryForm.province + this.queryForm.city + this.queryForm.area,
          "customerId": this.queryForm.service,
          "customerIds": [],
          "ditchEndTime": "",
          "ditchStartTime": "",
          "endTime": endTime,
          "keyWord": this.queryForm.info,
          "pageNo": this.pageNo,
          "pageSize": this.pageSize,
          "phone": "",
          "startTime": beginTime,
          "userDitch": this.queryForm.Incoming,
          "userIntention": "",
          "userLevel": this.queryForm.category,
        },
        "version": ""
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data;
          // 清空数据
        }
      })
    },
    reset () {
      this.queryForm = {
        info: "",
        Incoming: "",
        service: "",
        category: "",
        province: "",
        city: "",
        area: "",
        type: [],
        clientType: "1",
      }
      this.pageNo = 1;
      this.pageSize = 10;
      this.listAxios(1);
    },
    handleSelectionChange (val) { //员工的选择
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      }
      this.multipleSelection = val;
    },
    SelectionCurson (val) { //待分配的人员
      this.selectionCustomer = val;
    },
    //**数据请求**//
    handleNodeClick (data) {
      this.orgCode = data.orgCode;
      this.staiffList(data.orgCode)
    },
    /***员工列表***/
    staiffList (orgCode) {
      this.axios.post('/sys/v1/user/employee/list', {
        "request": {
          "endTime": "",
          "keyWord": "",
          "orgCode": orgCode,
          "pageNo": this.stafpage,
          "pageSize": this.stafPageSize,
          "phoneNumber": "",
          "positionCode": "",
          "reallyName": "",
          "startTime": "",
          "status": "A",
          "username": ""
        },
        "version": ""
      }, {
        headers: {
          isLoading: false
        }
      }).then(res => {
        if (res.code == 0) {
          this.tablePerson = res.data;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    //**数据请求**//
    treeAxios () {
      this.axios.post("/sys/v1/org/tree/select", {
        "request": {
          "orgName": "",
          "status": ""
        },
        "version": ""
      }).then(res => {
        if (res.code == 0) {
          this.tree = res.data;
          this.staiffList(res.data[0].orgCode);
        }
      })
    },
    getRowKey (row) {
      return row.id;
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },
    // 分配

    allocation () {
      if (this.is_null(this.selectionCustomer)) {
        this.$message.warning('未选择需要分配的客户')
      } else {
        this.Visible = true;
        this.treeAxios();
      }
    },
    // 分配客户成功
    submission: _.debounce(function () {
      let ids = [];
      for (let i = 0; i < this.selectionCustomer.length; i++) {
        ids.push(this.selectionCustomer[i].id)
      }
      this.axios.post('/order/comm/customeruser/appoint', {
        "request": {
          "appointUserId": this.multipleSelection[0].id, //分配接收的人
          "customerIds": ids //分配人员
        },
        "version": ""
      }, {
        headers: {
          isLoading: false
        }
      }).then(res => {
        // console.log(res);
        if (res.code == 0) {
          this.$message.success("分配成功");
          this.listAxios(1);
          this.$refs.multipleTable.clearSelection();
          this.$refs.table.clearSelection()
        } else {
          this.$message.error(res.message)
        }
      })
    }, 300),
    toggleSelection () {
      this.$refs.multipleTable.clearSelection();
      this.$refs.table.clearSelection()
    },
    tolist (row) {
      if (row.customerType != "4") {
        this.$router.push({
          name: 'customerListOrder',
          query: {
            id: row.id
          }
        }); //userId就是用户id
      } else {
        this.$message.warning("无权限操作")
      }
    },
    addCustomer () {
      this.$router.push({
        name: 'addCustomer'
      }); //userId就是用户id
    },
    toAddOrder (row) {
      if (row.customerType != "4") {
        this.$router.push({
          name: 'add_order',
          query: {
            userId: row.id,
            pingZ: true
          }
        }); //userId就是用户id
        sessionStorage.removeItem('goodsList');
        sessionStorage.removeItem('giftList');
        sessionStorage.removeItem('voucher');
      } else {
        this.$message.warning("无权限操作")
      }
    },
    // 客户下拉框数据
    customerlist () {
      this.axios.get('/sys/v1/user/employee/select/resign?salesAuthorityId=' + JSON.parse((sessionStorage.getItem(
        'salesAuthorityId').split(','))), {
        headers: {
          isLoading: false
        }
      }).then(res => {
        // console.log(res);
        if (res.code == 0) {
          this.customer = res.data;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    //** 普通数据请求 **//
    commentAxios () {
      //入线方式
      this.axios.get("/order/comm/customeruser/selectCustomerditch", {
        headers: {
          isLoading: false
        }
      }).then(res => {
        // console.log(res)
        if (res.code == 0) {
          this.line = res.data;
        } else {
          this.$message.error(res.message);
        }
      })
      /*客户类型*/
      this.axios.get("/sys/v1/common/by/group?groupId=" + "customer_type", {
        headers: {
          isLoading: false
        }
      }).then(res => {
        // console.log(res)
        if (res.code == 0) {
          this.client = res.data;
        } else {
          this.$message.error(res.message);
        }
      })
      /*等级*/
      this.axios.get("/sys/v1/common/by/group?groupId=" + "customer_level", {
        headers: {
          isLoading: false,
        },
      }).then(res => {
        // console.log(res)
        if (res.code == 0) {
          this.rank = res.data;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    //** 普通数据请求 **//

    handleCurrentChange (val) {
      this.pageNo = val;
      this.listAxios();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.listAxios();
    },

    handleCurrentEmplay (val) {
      this.stafpage = val;
      this.staiffList(this.orgCode);
    },
    handleSizeEmplay (val) {
      this.stafPageSize = val;
      this.staiffList(this.orgCode);
    },
    // 跳转客户资料 
    toInformation (row) {
      if (row.customerType != "4") {
        this.$router.push({
          name: "customerInformation",
          query: {
            id: row.id,
            navName: 1
          }
        })
      } else {
        this.$message.warning("无权限操作")
      }
    },
    // 跳转地址
    toAddress (row) {
      if (row.customerType != "4") {
        this.$router.push({
          name: "addressList",
          query: {
            id: row.id
          }
        })
      } else {
        this.$message.warning("无权限操作")
      }
    },
    //** 模糊查询数据 **//
    searchEvent () {
      this.listAxios('1')
    },
    getProvince (val) {
      this.queryForm.province = val;
      this.queryForm.city = "";
      this.queryForm.area = "";
    },
    getCity (val) {
      this.queryForm.city = val;
      this.queryForm.area = "";
    },
    getArea (val) {
      this.queryForm.area = val;
    },
    is_null (content) {
      if ((content + "") != "" && (content + "") != "undefined" && (content + "") != "null" && (content + "") != "请选择") {
        return false;
      } else {
        return true;
      }
    },
  }
}
</script>

<style scoped lang="scss">
/deep/.el-pagination .el-select .el-input .el-input__inner {
  width: 100px;
}

.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.table {
  margin-top: 10px;
  margin-bottom: 30px;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  background: #fff;
  padding: 10px;

  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
}

/deep/ .query .el-input__inner {
  width: 180px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  // float:left;
  display: inline-block;
  vertical-align: middle;
  color: #2d7ddf;
  // margin-left:20px;
  img {
    width: 25px;
    height: 25px;
  }
}
.operation:hover {
  cursor: pointer;
}

.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.page2 {
  text-align: right;
  // width: 100%;
  // background: #f5f5f5;
  padding-right: 20px;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 5;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

.table1 {
  display: inline-block;
  height: 500px;
  margin-left: 10px;
  width: 740px;
  overflow-y: scroll;
}

.tree {
  height: 600px;
  overflow-y: scroll;
  width: 250px;
  // float: left;
}

/deep/.el-dialog__body {
  padding: 15px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  display: flex;
  justify-content: space-between;
  height: 570px;
}

/deep/.el-dialog__header {
  background: #409eff;
  padding: 10px 20px 10px;

  .el-dialog__title {
    color: #fff;
  }
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 1052px;
  height: 700px;
}

/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

/deep/.el-input__inner {
  width: 200px;
  height: 28px;
  line-height: 28px;
}
</style>
